<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>文件列表</title>
    <link rel="stylesheet" href='/plug-in/pear/css/pear.css' media="all">
    <link rel="stylesheet" href='/css/base.css'>
    <style>
        .page-content {
            position: relative;
        }

        .layui-upload-list .layui-table th {
            text-align: center;
            font-weight: 800;
        }

        .layui-upload-list .layui-table th+th {
            width: 70px;
        }

        .layui-table-tool .layui-btn-container {
            /*margin-left: 255px;*/
        }

        #search-box {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 9px;
            z-index: 891;
        }
        .layui-table-page {
            text-align: right;
            padding-right: 0;
        }
        .role-box xm-select{
            border: 0;
        }
        .role-box .xm-label.auto-row{
            display: none;
        }
    </style>
</head>
<body>
<div class="page-content">
    <!--<div id="search-box">-->
    <!--    <form class="layui-form" action="" lay-filter="search-form">-->
    <!--        <div class="layui-inline">-->
    <!--            <input style="height: 31px;" class="layui-input" name="title" placeholder="请输入用户昵称进行搜索"-->
    <!--                   autocomplete="off">-->
    <!--        </div>-->
    <!--        <button class="layui-btn layui-btn-sm layui-bg-green" lay-submit-->
    <!--                lay-filter="reload"><span class="fa fa-search" aria-hidden="true"></span> 搜索-->
    <!--        </button>-->
    <!--    </form>-->
    <!--</div>-->
    <table class="layui-hide" id="table" lay-filter="table"></table>
</div>

<script type="text/html" id="toolbarTop">
    <div class="layui-btn-container">
        <button shiro:hasPermission="system.files.list" class="layui-btn layui-btn-sm layui-bg-black" lay-event="refresh"><span class="fa fa-refresh"
                                                                                                                               title="刷新表格" aria-hidden="true"></span></button>
        <button shiro:hasPermission="system.files.delete" class="layui-btn layui-btn-sm layui-bg-red layui-hide" id="isDel" lay-event="del"><span
                class="fa fa-trash-o" aria-hidden="true"></span> 删除</button>
    </div>
</script>
<script type="text/html" id="barRight">
    <a shiro:hasPermission="system.files.delete" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script src="/plug-in/jquery/jquery-3.5.1.min.js" charset="utf-8"></script>
<script src='/plug-in/layui/layui.js' charset="utf-8"></script>
<script src='/plug-in/lay-config.js' charset="utf-8"></script>
<script type="text/javascript" >
    let form = layui.form, layer=layui.layer, table = layui.table;

    let tab = table.render({
        elem: '#table',
        url: '/file/selectPage',
        page: {
            layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
            groups: 3, //只显示 1 个连续页码
        },
        //height: "full-40",
        limit: 15,
        skin: "line",
        limits: [15, 30, 45],
        toolbar: '#toolbarTop', //开启头部工具栏，并为其绑定左侧模板
        defaultToolbar: null,
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "total": res.data.total, //解析数据长度
                "data": res.data.records //解析数据列表
            };
        },
        response: {
            statusCode: 200, //规定成功的状态码，默认：0
            countName: 'total' //规定数据总数的字段名称，默认：count
        },
        cols: [
            [{
                type: 'checkbox',
                fixed: 'left'
            },
                {
                    field: "fileName",
                    minWidth: 120,
                    title: '文件名'
                },
                {
                    field: "fileType",
                    minWidth: 120,
                    title: '文件后缀',
                },
                {
                    minWidth: 120,
                    title: '预览',
                    templet: function (d) {
                        if (d.contentType.indexOf("image")!==-1){
                            return '<a href="javascript:;" key="open-img"><img src="/file/'+d.id+'" height="100%"></a>'
                        }
                    }
                },
                {
                    field: "contentType",
                    width: 160,
                    title: '文件类型',
                },
                {
                    width: 120,
                    title: '文件大小',
                    sort: true,
                    templet: function (d) {
                        let kb = (d.fileSize/1024).toFixed(2)
                        if (kb>1024){
                            let mb = (d.fileSize/1024/1024).toFixed(2)
                            return '<span class="layui-badge layui-bg-cyan">'+mb+" MB"+'</span>'
                        }else {
                            return '<span class="layui-badge layui-bg-cyan">'+kb+" KB"+'</span>'
                        }
                    }
                },
                {
                    field: "createdTime",
                    width: 180,
                    title: '上传时间',
                    sort: true
                },
                {
                    title: '操作',
                    toolbar: '#barRight',
                    width: 100,
                    unresize: true,
                    fixed: 'right'
                }
            ]
        ]
    });

    table.on('toolbar(table)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'refresh':
                form.val("search-form", {
                    title: ""
                })
                tab.reload({
                    page: {
                        curr: 1
                    },
                    where: {
                        nickname: ""
                    }
                })
                break;
            case 'del':
                let ids = []
                $.each(checkStatus.data, function (index, data) {
                    ids.push(data.id)
                })
                layer.confirm('确定删除选择文件么？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    layer.load()
                    $.ajax({
                        url: '/file/delete',
                        type: "POST",
                        data: {ids: ids},
                        traditional: true,
                        success: function (result) {
                            if (result.code == 200) {
                                tab.reload();
                                layer.closeAll('loading')
                                layer.msg("删除成功")
                            } else {
                                layer.closeAll('loading')
                                layer.msg("删除失败")
                            }
                        },
                        error: function () {
                            layer.closeAll('loading')
                            layer.msg("请求失败")
                        }
                    });
                });
                break;
        };
    });



    //监听行工具事件
    table.on('tool(table)', function(obj) {
        var data = obj.data;
        if(obj.event === "del"){
            layer.confirm('确定删除 <span style="color: red; font-weight: 800">' + data.fileName + '</span> 么？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                layer.load()
                $.ajax({
                    url: '/file/delete',
                    type: "POST",
                    data: {ids: [data.id]},
                    traditional: true,
                    success: function (result) {
                        if (result.code == 200) {
                            tab.reload();
                            layer.closeAll('loading')
                            layer.msg("删除成功")
                        } else {
                            layer.closeAll('loading')
                            layer.msg("删除失败")
                        }
                    },
                    error: function () {
                        layer.closeAll('loading')
                        layer.msg("请求失败")
                    }
                });
            });
        }
    });

    table.on('checkbox(table)', function(obj){
        var checkStatus = table.checkStatus("table");
        if(checkStatus.data.length>0){
            $("#isDel").removeClass("layui-hide")
            // $(".move-btn").removeClass("layui-hide")
        }else{
            $("#isDel").addClass("layui-hide")
            // $(".move-btn").addClass("layui-hide")
        }
    });

    $(document).on("click", "a[key=open-img]", function () {
        let imgData = {
            "title": "", //相册标题
            //"id": 123, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [   //相册包含的图片，数组格式
                {
                    //"alt": "图片名",
                    //"pid": 666, //图片id
                    "src": $(this).children("img").attr("src"), //原图地址
                    //"thumb": "" //缩略图地址
                }
            ]
        }
        layer.photos({
            photos: imgData,
            anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
        //console.log($(this).children("img").attr("src"))
    })

</script>
</body>
</html>